import React from 'react'
import { Button, Drawer, Form, Input,message, Tree} from 'antd';
const { TextArea } = Input;
import { getMenuAllApi, getMenuApi, getMenuByRole } from '../../../apis/menu';
import { addRole,updateRole } from '../../../apis/role';
export default function AddDrawer(props: any) {
    const { open, setOpen, title, isUpdate,roleInfo,setRoleInfo,getData } = props
    const [menus, SetMenus] = React.useState([])
    const [autoExpandParent, setAutoExpandParent] = React.useState<boolean>(true);
    //默认选中的菜单菜单
    const [defaultMenu, setDefaultMenu] = React.useState([])
    //获取表单输入的值
    const [roleData,setRoleData]=React.useState({ roleName: '', remark: '', menuId: '' })
    //获取新增时的所有菜单选项
    function getMenu() {
        getMenuAllApi().then(res => {
            SetMenus(res.rows.children)
        }).catch()
    }
    //根据用户id设置默认拥有的权限菜单
    function getRoleMenu() {
        getMenuByRole(roleInfo.roleId).then(
            res => {
                setDefaultMenu(res)
            }
        ).catch()
    }
    const onExpand = () => {
        setAutoExpandParent(false);
    };
    React.useEffect(() => {
        //得到全部菜单
        getMenu()
        
    },[])
    const confirmUpdate = () => {
        console.log(roleData, '扫比')
        updateRole({...roleData,roleId:roleInfo.roleId}).then(res => {
         message.success('修改成功')
         setOpen(false)
         getData()
     }).catch()
        // if (JSON.stringify(roleData) == "{}") {
        //     message.error('数据未发生变化')
        // } else if(!roleData.hasOwnProperty('roleName')||!roleData.hasOwnProperty('remark')) {
        //    message.error('角色描述数据未发生变化')
        // } else {
        //     updateRole({...roleData,roleId:roleInfo.roleId}).then(res => {
        //         message.success('修改成功')
        //         setOpen(false)
        //         getData()
        //     }).catch()
        // }
        // updateRole({...roleData,roleId:roleInfo.roleId}).then(res => {
        //     message.success('修改成功')
        //     setOpen(false)
        //     getData()
        // }).catch()
        
        console.log(defaultMenu,'神经病哈哈')
       
    
    }
    //表单值改变的时候，记录输入的数据，此时没有选择的菜单
    const valueChange=(_:any,value:any) => {
        console.log(value)
        setRoleData(value)
    }
    //菜单选中的时候，把选中的菜单数组转成字符串，追加到输入的数据
    //roleData为追加的数据，也就是发接口要的数据
    const onCheck = (checkedKeysValue: any) => {
        console.log(checkedKeysValue)
        setRoleData({ ...roleData, menuId: checkedKeysValue.join() })
    };
    const cancel=()=>{
        setOpen(false) 
    }
    const confirmAdd = () => {
        addRole(roleData).then(
            res => {
                message.success('添加成功')
                setOpen(false)
                getData()
            }
        ).catch()
    }
    const close = () => {
        setOpen(false)
    }
    const setroleInfo = () => {
        if (roleInfo.roleId) {
            getRoleMenu()
        } else {
            setDefaultMenu([])
        }
    }
  return (
      <>
          <Drawer
              title={title} placement="right" onClose={close} open={open} width="650px"
              //抽屉关闭后销毁里面的数据
              destroyOnClose={true}
              afterOpenChange={setroleInfo}
          footer={
              <>
                  {isUpdate ? <Button onClick={confirmUpdate}>确认编辑</Button> : <Button onClick={confirmAdd}>确认新增</Button>}
                  <Button onClick={cancel}>取消</Button>
              </>
        }
            
          >
              <Form
              onValuesChange={valueChange}
              >
                  <Form.Item
                      label="角色名称："
                      initialValue={roleInfo.roleName}
                      name={'roleName'}
                  >
                <Input></Input>
          </Form.Item>
                  <Form.Item
                      label='角色描述'
                      initialValue={roleInfo.remark}
                      name={'remark'}
                  >
                  <TextArea rows={4} />   
          </Form.Item>
                  <Form.Item>
                      {/* 编辑 */}
                       {
                            defaultMenu.length > 0 ? <Tree
                                checkable
                                onExpand={onExpand}
                                autoExpandParent={autoExpandParent}
                                defaultCheckedKeys={defaultMenu}
                                onCheck={onCheck}
                                treeData={menus}
                            /> : null
                      }
                      {/* 新增 */}
                        {
                            !isUpdate? <Tree
                            checkable
                            onExpand={onExpand}
                            autoExpandParent={autoExpandParent}
                            onCheck={onCheck}
                            treeData={menus}
                        /> : null
                        }
                  </Form.Item>
                  
          </Form>
      </Drawer>
      </>
  )
}
